var clientWidth=window.screen.width;
var html=document.getElementsByTagName('html')[0];
html.style.fontSize=clientWidth/20+'px';
window.onload=function(){
	function $(id){
        return document.getElementById(id);
}
var shuffling_Figure = document.getElementById('shuffling_Figure');
var divbox = shuffling_Figure.getElementsByTagName('div');
var btns = document.getElementsByClassName('ball_1');
var index = 0;
var timer;
function lunbo(opa){
      if(opa=='+'){
       index++;
      if (index==divbox.length) {      
            index=0;
       }
      }else if(opa=='-'){
        index--;
      if (index==-1) {      
            index=divbox.length-1;
       }
      }
      for(var i=0;i<divbox.length;i++){
         divbox[i].style.opacity =0; 
         btns[i].style.background ='#fff';          
       }
         divbox[index].style.opacity =1;
         btns[index].style.background ='skyblue';  
}
  $('btn_2').onclick=function(){
        lunbo('+');
  }
  $('btn_1').onclick=function(){
        lunbo('-');
  }
  var timer;
  timer=setInterval(function(){
    lunbo('+');
  },4000);
  $('btn').onmouseover=function(){
    clearTimeout(timer);
  }
  $('btn').onmouseout=function(){
    timer=setInterval(function(){
    lunbo('+');
  },4000);
}
}